<template>
  <div class="personal">
    <h2 class="mytitle">个人中心</h2>
    <div class="mycontent">
      <div style="margin: 20px;" class="left">
        <el-form
          label-position="left"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="姓名">
            <el-input v-model="formLabelAlign.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="formLabelAlign.sex" disabled></el-input>
          </el-form-item>
         
          <el-form-item label="手机号">
            <el-input v-model="formLabelAlign.phone" :disabled="a"></el-input>
          </el-form-item>
          <el-form-item label="技能">
            <el-input v-model="formLabelAlign.skill" :disabled="a"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="formLabelAlign.email" :disabled="a"></el-input>
          </el-form-item>
           <el-form-item label="爱好">
            <el-input
              v-model="formLabelAlign.hobby"
              :disabled="a"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-button plain @click="change">修改个人资料</el-button>
    <el-button plain @click="personal" v-show="!a">提交修改</el-button>
  </div>
</template>

<script>
import Api from '../assets/js/api'
export default {
  data() {
    return {
      a: true,
      formLabelAlign: {
        name: "",
        hobby: "",
        sex:'',
        phone:'',
        skill:'',
        email:'',
      },
    };
  },
  methods: {
    huoqu(){
      let that = this;
        this.$http({
          url: Api.userfindMyself, //请求个人信息接口
          method: "GET", //请求方式 默认get
          headers: {
            JWTHeaderName: sessionStorage.getItem("token"),
          }, // data数据
        }).then((res) => {
          that.formLabelAlign=res.data.data
          console.log(that.formLabelAlign);
          
        });
    },
    change() {
      this.a = false;
    },
    personal() {
      
      // 请求修改接口
      let that = this;
        this.$http({
          url: Api.userupdate, //修改个人信息接口
          method: "POST", //请求方式 默认get
          headers: {
            JWTHeaderName: sessionStorage.getItem("token"),
          },
          data:{
            uid:that.formLabelAlign.uid,
            name: that.formLabelAlign.name,
        hobby:  that.formLabelAlign.hobby,
        sex: that.formLabelAlign.sex,
        phone: that.formLabelAlign.phone,
        skill: that.formLabelAlign.skill,
        email: that.formLabelAlign.email,
          } // data数据
        }).then((res) => {
          console.log(res);
          this.huoqu()
          this.a = true;
           this.$message({
          message: '修改成功',
          type: 'success'
        });
        });
    },
  },
  mounted(){
    this.huoqu()
  }
};
</script>

<style scoped>
.mytitle {
  margin-top: 0;
}
.left {
  width: 50%;
}
</style>
